<template>
	<div>
		<div class="container">
			<div class="nav">
				<router-link to="/layout/gonglue">
					<img src="../../assets/smallIcon/return.png" alt="">
				</router-link>	
				<Search />
			</div>
			<div class="city">
				<ul>
					<li>
						<router-link to="/layout/more-city">城市最火</router-link>
					</li>
					<li>
						<router-link to="/layout/more-hot">人气最高</router-link>
					</li>
					<li>
						<router-link to="/layout/more-distance">距离最近</router-link>
					</li>
				</ul>
				<div class="heng"></div>
			</div>
			 <div class="hot">
            	<div class="banxin">
            		<img src="../../assets/landscape/picture_CS03.png"  alt="">
            	</div>
            	<div class="wenzi">
            	    <img src="../../assets/smallIcon/city.png"  alt="">
            	    <span>安徽</span>
                </div>
            </div>

            <div class="hot">
            	<div class="banxin">
            		<img src="../../assets/landscape/picture_CS02.png"  alt="">
            	</div>
            	<div class="wenzi">
            	    <img src="../../assets/smallIcon/city.png"  alt="">
            	    <span>桂林</span>
                </div>
            </div>

            <div class="hot">
            	<div class="banxin">
            		<img src="../../assets/landscape/picture_CS01.png"  alt="">
            	</div>
            	<div class="wenzi">
            	    <img src="../../assets/smallIcon/city.png"  alt="">
            	    <span>新疆</span>
                </div>
            </div>
		</div>
	</div>
</template>

<script>
import Search from '../../components/search.vue'
export default{
	name:"MHot",
	data(){
		return{

		}
	},
	components:{
			Search
		}
}	

</script>
<style scoped lang="less">
.container{
	.nav{
		width:100%;
		height:94 / 50rem;
		background-color: #7DD19C;
		overflow: hidden;
		position:fixed;
	    top:0;
	    left: 0;
	    right: 0;
		img{
			width: 22 /50rem;
			height:40 /50rem;
			float: left;
			margin-left: 20/ 50rem;
			margin-top: 28/50rem;
		}
		.search{
			float: left;
			position: relative;
			overflow: hidden;
			margin-left: 16.2%;
			input{
				width: 456 /50rem;
				height: 66 /50rem;
				border-radius: 30 /50rem;
				border: none;
				background-color: rgba(255,255,255,0.4);
				outline: none;
				float: left;
				margin-top: 14 /50rem;
				text-indent: 80 /50rem;
				color:#fff;
			 }
		}
    }
    .city{
		height: 88 / 50rem;
		background-color: #fff;
        margin-top: 98 / 50rem;
		ul{
           display: flex;
           li{
           	flex:1;
            text-align: center;
            margin-top: 27 / 50rem;
            font-size: 34 / 50rem;
           }
		}
		.heng{
			width: 100 / 50rem;
			height: 4 / 50rem;
			background-color: #5dade2;
			margin-top: 13 / 50rem;
			margin-left: 328 / 50rem;
		}
	}
    .hot{
    	height: 367 / 50rem;
    	background-color: #fff;
    	margin-top: 20 / 50rem;
    	.banxin{
    		width: 710 / 50rem;
    		margin-left: 20 / 50rem;
    		img{
    			width: 710 / 50rem;
    			height: 280 / 50rem;
    			margin-top: 20 / 50rem
    		}
    	}
    	.wenzi{
    		img{
    			display: inline-block;
    			vertical-align: middle;
    			width: 40 / 50rem;
    			height: 40 / 50rem;
    			margin-top: 10 / 50rem;
    			margin-left: 20 / 50rem;

    		}
    		span{
    			display: inline-block;
    			vertical-align: middle;
    			font-size: 20 / 50rem;
    			margin-left: 10 / 50rem;
                margin-top: 21 / 50rem;
    		}
    	}
    }
}
</style>